import React from 'react';

import '@/assets/css/confirm.css'


const Component = () =>
{
    //接收跳转参数
    const [searchParams] = React.Router.useSearchParams()

    let [rid, SetRID] = React.useState(searchParams.get('rid') ? searchParams.get('rid') : 0)

    let [show, SetShow] = React.useState(false)

    let [room, SetRoom] = React.useState({
        name:'',
        price:'',
        state:'',
        thumb_text:'',
        flag_text:[],
        content: '',
        total: 0,
    })

    let [order, SetOrder] = React.useState({
        busid: React.Business.id,
        roomid: rid,
        guest: '',
        origin_price: room.price,
        price: '',
        starttime: 0,
        endtime: 0,
        couponid:'',
        datestr: '',
    })

    React.useEffect(() => {
        RoomData()
        GuestData()
    }, [])

    //请求详情
    const RoomData = async () =>
    {
        var result = await React.HTTP.post("/room/info", {rid})

        if(result.code == 0)
        {
            React.error(result.msg)
            return false
        }

        SetRoom(result.data)

        console.log(result.data)
    }

    //当前用户的住客信息
    const GuestData = async () =>
    {
        var result = await React.HTTP.post('room/guest', {busid:React.Business.id})

        if(result.code == 0)
        {
            React.error(result.msg, () => {})
            return false
        }

        console.log(result.data)
    }




    //选择日期
    const DateChange = (val:any) =>
    {
        SetShow(false)
        
        var datestr = `${new Date(val[0]).toLocaleDateString()} - ${new Date(val[1]).toLocaleDateString()}`
        
        var starttime = Date.parse(new Date(val[0]).toLocaleString())/1000
        var endtime = Date.parse(new Date(val[1]).toLocaleString())/1000
        
        SetOrder({
            ...order,
            starttime,
            endtime,
            datestr,
        })
    }


    const confirm = async () =>
    {
        console.log(order)
    }

    return (
        <>
            <React.UI.NavBar 
                style={{background: `rgb(55, 68, 134)`, color:'#fff'}}
                back='返回' 
                onBack={React.back}
            >{room.name}</React.UI.NavBar>

            <div className="skeleton">
                <div className="detail">
                    <div className="thumb">
                        <img src={room.thumb_text} alt="" />
                    </div>
                    <div className="right">
                        <p>{room.name}</p>
                        <div className="tips">
                            {room.flag_text && room.flag_text.map((flag:any, index:any) => <span key={index}> {flag} </span>)}
                        </div>
                    </div>
                </div>

                <div className="skeleton_rect">
                    <div className="item">
                        <label>入住日期</label>
                        <React.UI.Input value={order.datestr} type="text" className="item_right" placeholder="请选择入住日期" onClick={() => SetShow(true)} />
                        
                        <React.UI.CalendarPicker
                            visible={show}
                            min={new Date()}
                            selectionMode='range'
                            onClose={() => SetShow(false)}
                            onMaskClick={() => SetShow(false)}
                            onConfirm={DateChange}
                        >

                        </React.UI.CalendarPicker>
                        
                    </div>
                    <div className="item">
                        <label>住客信息</label>
                        <input type="checkbox" />
                        <label className="u-checkbox__label">莉莉</label>
                        <input type="checkbox" />
                        <label className="u-checkbox__label">李明</label>
                        <button type="button" className="btn">
                            <a href="">添加/选择</a>
                        </button>
                    </div>
                </div>

                <div className="skeleton_price">
                    <div className="tips">房间费用</div>
                    <div className="prices">
                        <span>￥6600</span>
                        <span>共 1 晚</span>
                    </div>
                </div>
            </div>

            <div className="comfirm_foot-bar">
                <div className="text">
                    <span>总价:</span>
                    <span>￥6600.00</span>
                </div>

                <React.UI.Button onClick={confirm} color='primary' disabled={room.state ? false: true}>提交订单</React.UI.Button>
            </div>
        </>
    )
}

export default Component